<template>
  <div id="container">

  </div>
</template>

<script>
  import { Area } from '@antv/g2plot';
  export default {
    name: "TestArea",
    data(){
      return {
        realData:[{"type":"win","time":0,"value":35},{"type":"draw","time":0,"value":33},{"type":"lose","time":0,"value":32},{"type":"win","time":2,"value":34.9},{"type":"draw","time":2,"value":32.7},{"type":"lose","time":2,"value":32.4},{"type":"win","time":4,"value":34.9},{"type":"draw","time":4,"value":32.3},{"type":"lose","time":4,"value":32.8},{"type":"win","time":6,"value":34.8},{"type":"draw","time":6,"value":32},{"type":"lose","time":6,"value":33.2},{"type":"win","time":8,"value":34.7},{"type":"draw","time":8,"value":31.7},{"type":"lose","time":8,"value":33.6},{"type":"win","time":10,"value":34.7},{"type":"draw","time":10,"value":31.3},{"type":"lose","time":10,"value":34},{"type":"win","time":12,"value":34.6},{"type":"draw","time":12,"value":31},{"type":"lose","time":12,"value":34.4},{"type":"win","time":14,"value":34.5},{"type":"draw","time":14,"value":30.7},{"type":"lose","time":14,"value":34.8},{"type":"win","time":16,"value":34.4},{"type":"draw","time":16,"value":30.3},{"type":"lose","time":16,"value":35.2},{"type":"win","time":18,"value":34.4},{"type":"draw","time":18,"value":30},{"type":"lose","time":18,"value":35.6},{"type":"win","time":20,"value":34.3},{"type":"draw","time":20,"value":29.7},{"type":"lose","time":20,"value":36},{"type":"win","time":22,"value":34.2},{"type":"draw","time":22,"value":29.3},{"type":"lose","time":22,"value":36.4},{"type":"win","time":24,"value":34.2},{"type":"draw","time":24,"value":29},{"type":"lose","time":24,"value":36.8},{"type":"win","time":26,"value":34.1},{"type":"draw","time":26,"value":28.6},{"type":"lose","time":26,"value":37.2},{"type":"win","time":28,"value":34},{"type":"draw","time":28,"value":28.3},{"type":"lose","time":28,"value":37.6},{"type":"win","time":30,"value":34},{"type":"draw","time":30,"value":28},{"type":"lose","time":30,"value":38},{"type":"win","time":32,"value":33.9},{"type":"draw","time":32,"value":27.6},{"type":"lose","time":32,"value":38.4},{"type":"win","time":34,"value":33.8},{"type":"draw","time":34,"value":27.3},{"type":"lose","time":34,"value":38.8},{"type":"win","time":36,"value":33.7},{"type":"draw","time":36,"value":27},{"type":"lose","time":36,"value":39.2},{"type":"win","time":38,"value":33.7},{"type":"draw","time":38,"value":26.6},{"type":"lose","time":38,"value":39.6},{"type":"win","time":40,"value":33.6},{"type":"draw","time":40,"value":26.3},{"type":"lose","time":40,"value":40},{"type":"win","time":42,"value":33.5},{"type":"draw","time":42,"value":26},{"type":"lose","time":42,"value":40.4},{"type":"win","time":44,"value":33.5},{"type":"draw","time":44,"value":25.8},{"type":"lose","time":44,"value":40.6},{"type":"win","time":46,"value":33.5},{"type":"draw","time":46,"value":25.9},{"type":"lose","time":46,"value":40.6},{"type":"win","time":48,"value":33.5},{"type":"draw","time":48,"value":25.9},{"type":"lose","time":48,"value":40.6},{"type":"win","time":50,"value":33.4},{"type":"draw","time":50,"value":25.9},{"type":"lose","time":50,"value":40.6},{"type":"win","time":52,"value":33.4},{"type":"draw","time":52,"value":26},{"type":"lose","time":52,"value":40.5},{"type":"win","time":54,"value":33.4},{"type":"draw","time":54,"value":26},{"type":"lose","time":54,"value":40.5},{"type":"win","time":56,"value":33.4},{"type":"draw","time":56,"value":26},{"type":"lose","time":56,"value":40.5},{"type":"win","time":58,"value":33.4},{"type":"draw","time":58,"value":26.1},{"type":"lose","time":58,"value":40.5},{"type":"win","time":60,"value":33.4},{"type":"draw","time":60,"value":26.1},{"type":"lose","time":60,"value":40.5},{"type":"win","time":62,"value":33.4},{"type":"draw","time":62,"value":26.1},{"type":"lose","time":62,"value":40.5},{"type":"win","time":64,"value":33.3},{"type":"draw","time":64,"value":26.2},{"type":"lose","time":64,"value":40.4},{"type":"win","time":66,"value":33.3},{"type":"draw","time":66,"value":26.2},{"type":"lose","time":66,"value":40.4},{"type":"win","time":68,"value":33.3},{"type":"draw","time":68,"value":26.2},{"type":"lose","time":68,"value":40.4},{"type":"win","time":70,"value":33.3},{"type":"draw","time":70,"value":26.3},{"type":"lose","time":70,"value":40.4},{"type":"win","time":72,"value":33.3},{"type":"draw","time":72,"value":26.3},{"type":"lose","time":72,"value":40.4},{"type":"win","time":74,"value":33.4},{"type":"draw","time":74,"value":26.3},{"type":"lose","time":74,"value":40.3},{"type":"win","time":76,"value":33.5},{"type":"draw","time":76,"value":26.3},{"type":"lose","time":76,"value":40.2},{"type":"win","time":78,"value":33.6},{"type":"draw","time":78,"value":26.3},{"type":"lose","time":78,"value":40.2},{"type":"win","time":80,"value":33.6},{"type":"draw","time":80,"value":26.3},{"type":"lose","time":80,"value":40.1},{"type":"win","time":82,"value":33.7},{"type":"draw","time":82,"value":26.3},{"type":"lose","time":82,"value":40},{"type":"win","time":84,"value":33.8},{"type":"draw","time":84,"value":26.3},{"type":"lose","time":84,"value":40},{"type":"win","time":86,"value":33.9},{"type":"draw","time":86,"value":26.3},{"type":"lose","time":86,"value":39.9},{"type":"win","time":88,"value":33.9},{"type":"draw","time":88,"value":26.3},{"type":"lose","time":88,"value":39.8},{"type":"win","time":90,"value":34},{"type":"draw","time":90,"value":26.3},{"type":"lose","time":90,"value":39.8},{"type":"win","time":92,"value":34.1},{"type":"draw","time":92,"value":26.2},{"type":"lose","time":92,"value":39.7},{"type":"win","time":94,"value":34.2},{"type":"draw","time":94,"value":26.2},{"type":"lose","time":94,"value":39.7},{"type":"win","time":96,"value":34.2},{"type":"draw","time":96,"value":26.2},{"type":"lose","time":96,"value":39.6},{"type":"win","time":98,"value":34.3},{"type":"draw","time":98,"value":26.2},{"type":"lose","time":98,"value":39.5},{"type":"win","time":100,"value":34.4},{"type":"draw","time":100,"value":26.2},{"type":"lose","time":100,"value":39.5},{"type":"win","time":102,"value":34.5},{"type":"draw","time":102,"value":26.2},{"type":"lose","time":102,"value":39.4},{"type":"win","time":104,"value":34.5},{"type":"draw","time":104,"value":26.2},{"type":"lose","time":104,"value":39.3},{"type":"win","time":106,"value":34.6},{"type":"draw","time":106,"value":26.2},{"type":"lose","time":106,"value":39.3},{"type":"win","time":108,"value":34.7},{"type":"draw","time":108,"value":26.2},{"type":"lose","time":108,"value":39.2},{"type":"win","time":110,"value":34.8},{"type":"draw","time":110,"value":26.2},{"type":"lose","time":110,"value":39.1},{"type":"win","time":112,"value":34.8},{"type":"draw","time":112,"value":26.2},{"type":"lose","time":112,"value":39.1},{"type":"win","time":114,"value":34.8},{"type":"draw","time":114,"value":26.2},{"type":"lose","time":114,"value":39},{"type":"win","time":116,"value":34.9},{"type":"draw","time":116,"value":26.3},{"type":"lose","time":116,"value":38.9},{"type":"win","time":118,"value":34.9},{"type":"draw","time":118,"value":26.3},{"type":"lose","time":118,"value":38.9},{"type":"win","time":120,"value":34.9},{"type":"draw","time":120,"value":26.4},{"type":"lose","time":120,"value":38.8},{"type":"win","time":122,"value":35},{"type":"draw","time":122,"value":26.4},{"type":"lose","time":122,"value":38.7},{"type":"win","time":124,"value":35},{"type":"draw","time":124,"value":26.4},{"type":"lose","time":124,"value":38.7},{"type":"win","time":126,"value":35},{"type":"draw","time":126,"value":26.4},{"type":"lose","time":126,"value":38.6},{"type":"win","time":128,"value":35},{"type":"draw","time":128,"value":26.5},{"type":"lose","time":128,"value":38.5},{"type":"win","time":130,"value":35.1},{"type":"draw","time":130,"value":26.5},{"type":"lose","time":130,"value":38.5},{"type":"win","time":132,"value":35.1},{"type":"draw","time":132,"value":26.6},{"type":"lose","time":132,"value":38.4},{"type":"win","time":134,"value":35.1},{"type":"draw","time":134,"value":26.6},{"type":"lose","time":134,"value":38.3},{"type":"win","time":136,"value":35.2},{"type":"draw","time":136,"value":26.6},{"type":"lose","time":136,"value":38.3},{"type":"win","time":138,"value":35.2},{"type":"draw","time":138,"value":26.6},{"type":"lose","time":138,"value":38.2},{"type":"win","time":140,"value":35.2},{"type":"draw","time":140,"value":26.7},{"type":"lose","time":140,"value":38.1},{"type":"win","time":142,"value":35.3},{"type":"draw","time":142,"value":26.7},{"type":"lose","time":142,"value":38.1},{"type":"win","time":144,"value":35.3},{"type":"draw","time":144,"value":26.8},{"type":"lose","time":144,"value":38},{"type":"win","time":146,"value":35.3},{"type":"draw","time":146,"value":26.8},{"type":"lose","time":146,"value":37.9},{"type":"win","time":148,"value":35.3},{"type":"draw","time":148,"value":26.8},{"type":"lose","time":148,"value":37.9},{"type":"win","time":150,"value":35.4},{"type":"draw","time":150,"value":26.8},{"type":"lose","time":150,"value":37.8},{"type":"win","time":152,"value":35.4},{"type":"draw","time":152,"value":26.9},{"type":"lose","time":152,"value":37.7},{"type":"win","time":154,"value":35.4},{"type":"draw","time":154,"value":26.9},{"type":"lose","time":154,"value":37.7},{"type":"win","time":156,"value":35.5},{"type":"draw","time":156,"value":27},{"type":"lose","time":156,"value":37.6},{"type":"win","time":158,"value":35.5},{"type":"draw","time":158,"value":27},{"type":"lose","time":158,"value":37.5},{"type":"win","time":160,"value":35.5},{"type":"draw","time":160,"value":27},{"type":"lose","time":160,"value":37.5},{"type":"win","time":162,"value":35.5},{"type":"draw","time":162,"value":27},{"type":"lose","time":162,"value":37.5},{"type":"win","time":164,"value":35.5},{"type":"draw","time":164,"value":27},{"type":"lose","time":164,"value":37.5},{"type":"win","time":166,"value":35.5},{"type":"draw","time":166,"value":27},{"type":"lose","time":166,"value":37.5},{"type":"win","time":168,"value":35.5},{"type":"draw","time":168,"value":27},{"type":"lose","time":168,"value":37.4},{"type":"win","time":170,"value":35.5},{"type":"draw","time":170,"value":27.1},{"type":"lose","time":170,"value":37.4},{"type":"win","time":172,"value":35.5},{"type":"draw","time":172,"value":27.1},{"type":"lose","time":172,"value":37.4},{"type":"win","time":174,"value":35.5},{"type":"draw","time":174,"value":27.1},{"type":"lose","time":174,"value":37.4},{"type":"win","time":176,"value":35.5},{"type":"draw","time":176,"value":27.1},{"type":"lose","time":176,"value":37.4},{"type":"win","time":178,"value":35.5},{"type":"draw","time":178,"value":27.1},{"type":"lose","time":178,"value":37.4},{"type":"win","time":180,"value":35.5},{"type":"draw","time":180,"value":27.1},{"type":"lose","time":180,"value":37.4},{"type":"win","time":182,"value":35.5},{"type":"draw","time":182,"value":27.1},{"type":"lose","time":182,"value":37.3},{"type":"win","time":184,"value":35.5},{"type":"draw","time":184,"value":27.1},{"type":"lose","time":184,"value":37.3},{"type":"win","time":186,"value":35.5},{"type":"draw","time":186,"value":27.1},{"type":"lose","time":186,"value":37.3},{"type":"win","time":188,"value":35.6},{"type":"draw","time":188,"value":27.2},{"type":"lose","time":188,"value":37.3},{"type":"win","time":190,"value":35.6},{"type":"draw","time":190,"value":27.2},{"type":"lose","time":190,"value":37.3},{"type":"win","time":192,"value":35.6},{"type":"draw","time":192,"value":27.2},{"type":"lose","time":192,"value":37.3},{"type":"win","time":194,"value":35.6},{"type":"draw","time":194,"value":27.2},{"type":"lose","time":194,"value":37.3},{"type":"win","time":196,"value":35.6},{"type":"draw","time":196,"value":27.2},{"type":"lose","time":196,"value":37.2},{"type":"win","time":198,"value":35.6},{"type":"draw","time":198,"value":27.2},{"type":"lose","time":198,"value":37.2},{"type":"win","time":200,"value":35.6},{"type":"draw","time":200,"value":27.2},{"type":"lose","time":200,"value":37.2},{"type":"win","time":202,"value":35.6},{"type":"draw","time":202,"value":27.2},{"type":"lose","time":202,"value":37.2},{"type":"win","time":204,"value":35.6},{"type":"draw","time":204,"value":27.2},{"type":"lose","time":204,"value":37.2},{"type":"win","time":206,"value":35.6},{"type":"draw","time":206,"value":27.2},{"type":"lose","time":206,"value":37.2},{"type":"win","time":208,"value":35.6},{"type":"draw","time":208,"value":27.3},{"type":"lose","time":208,"value":37.2},{"type":"win","time":210,"value":35.6},{"type":"draw","time":210,"value":27.3},{"type":"lose","time":210,"value":37.1},{"type":"win","time":212,"value":35.6},{"type":"draw","time":212,"value":27.3},{"type":"lose","time":212,"value":37.1},{"type":"win","time":214,"value":35.6},{"type":"draw","time":214,"value":27.3},{"type":"lose","time":214,"value":37.1},{"type":"win","time":216,"value":35.6},{"type":"draw","time":216,"value":27.3},{"type":"lose","time":216,"value":37.1},{"type":"win","time":218,"value":35.6},{"type":"draw","time":218,"value":27.3},{"type":"lose","time":218,"value":37.1},{"type":"win","time":220,"value":35.6},{"type":"draw","time":220,"value":27.3},{"type":"lose","time":220,"value":37.1},{"type":"win","time":222,"value":35.7},{"type":"draw","time":222,"value":27.3},{"type":"lose","time":222,"value":37.1},{"type":"win","time":224,"value":35.7},{"type":"draw","time":224,"value":27.3},{"type":"lose","time":224,"value":37},{"type":"win","time":226,"value":35.7},{"type":"draw","time":226,"value":27.3},{"type":"lose","time":226,"value":37},{"type":"win","time":228,"value":35.7},{"type":"draw","time":228,"value":27.3},{"type":"lose","time":228,"value":37},{"type":"win","time":230,"value":35.7},{"type":"draw","time":230,"value":27.3},{"type":"lose","time":230,"value":37},{"type":"win","time":232,"value":35.8},{"type":"draw","time":232,"value":27.3},{"type":"lose","time":232,"value":37},{"type":"win","time":234,"value":35.8},{"type":"draw","time":234,"value":27.3},{"type":"lose","time":234,"value":37},{"type":"win","time":236,"value":35.8},{"type":"draw","time":236,"value":27.2},{"type":"lose","time":236,"value":36.9},{"type":"win","time":238,"value":35.8},{"type":"draw","time":238,"value":27.2},{"type":"lose","time":238,"value":36.9},{"type":"win","time":240,"value":35.8},{"type":"draw","time":240,"value":27.2},{"type":"lose","time":240,"value":36.9},{"type":"win","time":242,"value":35.9},{"type":"draw","time":242,"value":27.2},{"type":"lose","time":242,"value":36.9},{"type":"win","time":244,"value":35.9},{"type":"draw","time":244,"value":27.2},{"type":"lose","time":244,"value":36.9},{"type":"win","time":246,"value":35.9},{"type":"draw","time":246,"value":27.2},{"type":"lose","time":246,"value":36.9},{"type":"win","time":248,"value":35.9},{"type":"draw","time":248,"value":27.2},{"type":"lose","time":248,"value":36.9},{"type":"win","time":250,"value":35.9},{"type":"draw","time":250,"value":27.2},{"type":"lose","time":250,"value":36.8},{"type":"win","time":252,"value":36},{"type":"draw","time":252,"value":27.2},{"type":"lose","time":252,"value":36.8},{"type":"win","time":254,"value":36},{"type":"draw","time":254,"value":27.2},{"type":"lose","time":254,"value":36.8},{"type":"win","time":256,"value":36},{"type":"draw","time":256,"value":27.2},{"type":"lose","time":256,"value":36.7},{"type":"win","time":258,"value":36.1},{"type":"draw","time":258,"value":27.2},{"type":"lose","time":258,"value":36.6},{"type":"win","time":260,"value":36.2},{"type":"draw","time":260,"value":27.3},{"type":"lose","time":260,"value":36.5},{"type":"win","time":262,"value":36.3},{"type":"draw","time":262,"value":27.3},{"type":"lose","time":262,"value":36.4},{"type":"win","time":264,"value":36.4},{"type":"draw","time":264,"value":27.3},{"type":"lose","time":264,"value":36.3},{"type":"win","time":266,"value":36.5},{"type":"draw","time":266,"value":27.4},{"type":"lose","time":266,"value":36.2},{"type":"win","time":268,"value":36.6},{"type":"draw","time":268,"value":27.4},{"type":"lose","time":268,"value":36.1},{"type":"win","time":270,"value":36.6},{"type":"draw","time":270,"value":27.4},{"type":"lose","time":270,"value":35.9}]
      }
    },
    mounted() {
      const data =  this.realData;
      const area = new Area('container', {
        data,
        xField: 'time',
        yField: 'value',
        seriesField: 'type',
        slider: {
          start: 0.1,
          end: 0.9,
        },
      });
      area.render();
    }
  }
</script>

<style scoped>

</style>